---
---

html {
  position: relative;
  min-height: 100%;
}

// Global variables
$fsize: 14px;

body {
  padding: 50px 0 0 0;
  // Compensate for height of top navbar
  font-family: "Open Sans", sans-serif;
  font-size: $fsize;
}

// Position logo in topnav
.navbar-brand {
  padding: 8px 15px 5px 15px;
}

// Nav text links
.navbar-inverse .navbar-nav li a.dropdown-toggle,
footer.footer ul.text-links a,
footer.footer .ftitle {
  // topnav toggle and footer links
  color: #9d9d9d;
  text-shadow: 1px 1px 3px #000;
}
// Footer text has headings
footer.footer .ftitle {
  font-weight: bold;
  text-transform: uppercase;
}

nav ul.dropdown-menu a {
  // topnav links (toggled open state)
  color: #333;
  text-shadow: 1px 1px 1px #ddd;
}

// The breadcrumb trail row
div.breadbar {
  ul.breadcrumb {
    background-color: #fff;
    margin: 1em 0;
    padding: 0;
    li {
      font-size: $fsize * 0.9;
    }
  }
  .breadcrumb > li + li:before {
    content: ">\00a0";
    padding: 0 5px;
    color: #cccccc;
  }
}

// The kramdown-generated TOC
ul#markdown-toc {
  border: 1px solid #ddd;
  font-size: $fsize * 0.9;
  list-style-type: disc;
  display: none;
  // Initial state
  width: 80%;
  // Leave room for toggle button
  padding-right: 1em;
  padding-bottom: 1em;
  ul {
    // 1st nested child
    padding: 0 0 0 1em;
    list-style-type: disc;
  }
  &:before {
    content: "Contents";
    display: block;
    font-weight: bold;
    font-size: 15px;
    //text-decoration: underline;
    margin: 1em 1em .5em -1em;
    //margin-bottom: .5em;
  }
}

// TOC toggle button
a.tocbutton {
  margin-left: 1em;
  margin-bottom: 1em;
}

// Standard page content styles (.page-content)
article.page-content {
  h1 {
    font-size: $fsize * 1.7;
  }
  h2 {
    font-size: $fsize * 1.6;
    font-weight: bold;
    margin-top: 0;
  }
  h3 {
    font-size: $fsize * 1.3;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    // Little extra vertical whitespace, as h3 is the
    // standard top-level heading in an article/page.
    margin-top: 25px;
    margin-bottom: 15px;
  }
  h4 {
    font-size: $fsize * 1.2;
    font-weight: bold;
    font-style: italic;
    // h2 is standard 2nd-level page heading. Whitespace.
    margin-top: 20px;
  }
  h5 {
    font-size: $fsize * 1.1;
    font-weight: bold;
  }
  code, kbd, pre, samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  }
  // Need a special selector for the case of <code> within <pre>,
  // to prevent excess padding-left.
  pre code {
    padding-left: 0;
  }
  p {
    a, code, pre {
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
  }
}

// Homepage styles
body.home {
  article.page-content {
    margin-top: 2em;
  }
  .supported,
  .involved,
  .news {
    h3 {
      text-align: center;
      padding-bottom: .5em;
      margin-top: 2.5em;
    }
    .thumbnail {
      border: none;
      box-shadow: none;
      img {
        max-height: 66px;
      }
    }
    h4 {
      margin-top: 0;
    }
  }

  // allow links in news to break/wrap
  .news {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  // make the supported icons look nice on mobile
  .supported {
    @media (max-width: 768px) {
      .col-xs-2 {
        width: 33%;
      }
    }
  }

  // Get involved items should only be 1-up on mobile
  .involved {
    .col-xs-6, .col-xs-4 {
      @media (max-width: 768px) {
        width: 100%;
      }
    }
  }
}

// FAQ page styles
body.faq {
  h3 {
    margin-top: 2em;
    // whitespace above Faq titles
  }
}

// Videos page
body.videos {
  // We want headings for the TOC, but they're
  // redundant, so don't display.
  h3 {
    visibility: hidden;
  }
}

// API docs styles
body.api {
  article.page-content {
    h4 {}
    h5 {
      margin-top: 1em;
    }
    div.highlight + h4 {
      // h4s following code blocks
      margin-top: 2em;
    }
    // Definition lists (for parameters, etc.)
    dl {}
    dt {
      // Distinguish from headings
      color: #666;
      font-style: italic;
    }
    dd {
      margin-left: 1em;
    }
    ul#markdown-toc ul ul {
      // Suppress display of 3rd-level+ TOC entries
      // Too cluttered for API docs
      display: none;
    }
  }
}

// Press kit styles
body.press .page-content {
  ul {
    margin-left: 1.5em;
    padding-left: 0;
  }
}

// topnav styles
nav.navbar li, nav.navbar input, nav.navbar button {
  font-size: $fsize * 0.9;
}

// Sticky footer styles
// In-progress. Pinned and visible.
footer.footer {
  position: absolute;

  // Set the fixed height of the footer here.
  // This value considers negative bottom position.

  //mobile height for footer
  bottom: -720px;
  height: 610px;
  //reset to default height
  @media (min-width: 768px) {
    bottom: -340px;
    height: 230px;
  }

  min-width: 100%;
  color: #9d9d9d;
  background-color: #444;
  padding-top: 1em;
  font-size: $fsize * 0.9;
  div.fpanel {
    //background-color: #333;
    min-height: 200px;
    //text-align: center;

  }
  ul {
    list-style-type: none;
    padding-left: 0;
    a {
      color: #9d9d9d;
    }
    a:hover {}
  }

  .overflow-x: auto;
  @media (max-width: 768px) {
    .col-xs-2 {
      width: 50%;
    }
  }
}

// Add'l styles for responsive YouTube embeds
div.yt-embed {
  border: 1px solid #ddd;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

// Code blocks
pre {
  overflow-x: auto;
  code {
    overflow-wrap: normal;
    white-space: pre;
  }
}

// Code spans
// Explicit Bootstrap overrides
code {
  padding: 2px 4px;
  font-size: 95%;
  color: #000;
  background-color: #eee;
  border-radius: 4px;
}

// Debug container
div#debug {
  margin-top: 3em;
  border: 1px solid #ddd;
  background-color: #f7f7f7;
  font-size: $fsize * 0.9;
  padding: 1em;
  h1 {
    color: #c00;
    text-align: center;
    font-weight: bold;
    font-style: italic;
    font-size: 48px;
    margin-top: 0;
  }
  // Begin Google CSE overrides
  // Also see http://getbootstrap.com/getting-started/#third-parties
  input.gsc-input,
  .gsc-input-box,
  .gsc-input-box-hover,
  .gsc-input-box-focus,
  .gsc-search-button {
    box-sizing: content-box;
    line-height: normal;
  }
  .gsc-control-cse {
    background-color: inherit;
    border: none;
  }
  // End Google CSE overrides
}
